<template>
    <div class="menu">
      <div class="search-box">
          <van-search v-model="searchValue" shape="round" placeholder="请输入搜索关键词"
          @keyup="getSearch(searchValue)"
          @clear="clearIpt" />
      </div> 
      <div class="menu-box" v-show="!flag">
          <div class="menu-list" >
              <div class="menu-list-item"
              v-for="(item,index) in menuList" :key="index"
              @click="toggleMenuList(index,item.type)"
              :class="{active:activeIndex==index}">
                  {{item.typeDesc}}
              </div>
              
          </div>
          <div class="menu-content">
              <div class="menu-product">
                  <div class="menu-pro" v-for="(item,index) in products" :key="index"
                  @click="viewDetail(item.pid)">
                      <products :pro="item"></products>
                  </div>

              </div>
          </div>
      </div> 
      <div class="search-coffee" v-show="flag">
          <coffee :data="searchPro"></coffee>
      </div>
    </div>
</template>

<script>
import Coffee from '../components/Coffee.vue'
import Products from '../components/Products.vue'
export default {
    name:'Menu',
    components:{
        Products,
        Coffee
    },
    data() {
        return {
            //用于高亮商品导航栏
            activeIndex:0,
            searchValue:'',
            menuList:[],
            products:[],
            //搜索出来的商品
            searchPro: [],
            flag:false,
        }
    },
    created() {
        //调用获取商品类型方法
        this.getProductType();
    },
    methods: {
        //获取商品类型导航那一栏数据的方法
        getProductType() {
            this.axios({
                method:'get',
                url:'/type',
                //params参数在请求拦截器中添加处理
            }).then(res=>{
                // 
                if(res.data.code==400){
                    //处理数据(热卖推荐不是商品类型)
                    res.data.result.unshift({
                        type:'isHot',
                        typeDesc:'热卖推荐'
                    });
                this.menuList=res.data.result;
                //根据商品类型获取商品数据
                this.getProductByType(res.data.result[this.activeIndex].type);
                }
            }).catch(err=>{
                
            })
        },
        //根据商品类型获取商品数据
        getProductByType(type) {
            // 处理商品类型 (type:商品类型)
            let key='';
            let value='';
            if(type=='isHot') {
                key='isHot';
                value=1;
            }else {
                key='type';
                value=type;
            }

            this.axios({
                method:'get',
                url:'/typeProducts',
                params: {
                    //params参数在请求拦截器中添加处理
                    key,
                    value
                }
            }).then(res=>{
                // 
                if(res.data.code==500) {
                    this.products=res.data.result;
                }
            }).catch(err=>{
                
            })
        },
        // 切换类型列表
        toggleMenuList(index,type) {
            //type:商品类型
            
            if(this.activeIndex==index) {
                return;
            }
            this.activeIndex=index;
            //跟据商品类型获取商品数据
            this.getProductByType(type);
        },
        // 查看商品详情
        viewDetail(pid) {
            this.$router.push({name:'Detail',   params:{pid}
            })
        },
         //获取搜索数据
        getSearch(ipt) {
            if(ipt==''){ 
                this.flag=false;
            }else{
                this.flag=true;
                this.axios({
                    method:'get',
                    url:'/search',
                    params:{name:ipt}
                }).then(res=>{
                    // 
                    if(res.data.code=='Q001') {
                        this.$toast(res.data.msg);
                        this.searchPro=res.data.result;
                    }
                }).catch(err=>{
                    
                })

            }
        },
        //清空搜索框
        clearIpt() {
            this.searchValue='';
            this.flag=false;
            
        }
    },
}
</script>

<style lang="less" scoped>
@import url('../assets/base.less');

    .search-box {
        position: sticky;
        top:0;
    }
    .menu-box {
        display:flex;
        position: fixed;
        top:54px;
        left:0;
        right:0;
        bottom:50px;
        background-color: #f7f7f7;
    .menu-list {
        width:80px;
        height:100%;
        font-size: 14px;
        //设置纵轴滚动条
        overflow-y:auto;

        .menu-list-item {
            height:40px;
            line-height: 40px;
            text-align: center;
        }
        .menu-list-item.active{
            color:@mainColor;
            transform: scale(1.1);
        }
    }
    .menu-content {
        flex:1;
        height:100%;
        padding:10px;
        font-size: 14px;
        box-sizing: border-box;
        overflow-y:auto ;
        .menu-product {
            display: flex;
            flex-wrap:wrap;
            .menu-pro {
                width:calc(~"50% - 5px");
                margin-right: 10px;
                margin-bottom: 10px;
                &:nth-child(2n) {
                    margin-right: 0;
                }
            }
        }
    }
    }
</style>